<template>
  <div class="box">
    <JsContentTitle
      :pageTitle="state.pageTitle"
      :buttonData="state.buttonData"
    ></JsContentTitle>
    <div class="contentView">
      <JsTable
        :toolBar="toolBar"
        :total="state.totalCount"
        :dataSource="state.dataSource"
        :columns="state.columns"
        :refresh="state.refresh"
      >
        <template #search-last>
          <el-button @click="reset" type="primary" size="small">重置</el-button>
        </template>
      </JsTable>
    </div>
  </div>
</template>
<script setup lang="ts">
// import { getCluster } from '@/api/login'
// getCluster({}).then((res:any) => {
//   console.log('123', res)
// })

// 重置
const reset = () => {
  state.value.api = {
    username: '',
  }
}

const state = ref({
  buttonData: [],
  refresh: 0,
  totalCount: 0,
  pageTitle: '列表',
  columns: {
    width:300,
    props: [
      {
        name: '列1',
        key: 'username',
      },
      {
        name: '列2',
        key: 'type',
      },
      {
        name: '列3',
        key: 'createTime',
      },
      {
        name: '列4',
        key: 'updateTime',
      },
    ],
    options: {
      btns: [
        {
          label: '编辑',
          key: 'edit',
          type:'warning'
        },
        {
          label: '详情',
          key: 'reset',
        },
        {
          label: '删除',
          key: 'delete',
          type:'danger'
        },
      ],
    },
  },
  dataSource: [{
    username:'1111',
    type:'1111',
    createTime:'1111',
    updateTime:'1111',
  }],
  tableEvent: {},
} as any)

const toolBar = ref<any>({
  form: {
    username: '',
  },
  input: [
    {
      label: '输入框',
      key: 'username',
      placeholder: '请输入',
      el: 'input',
    },
  ],
  btns: [
    {
      label: '查询',
      icon: 'Search',
    },
    {
      label: '重置',
      event: () => {
        Object.keys(toolBar.value.form).forEach((key: string) => {
          toolBar.value.form[key] = ''
        })
      },
    },
  ],
})
</script>

<style lang="scss" scoped>
*::-webkit-scrollbar {
  display: none;
  width: 10px;
}
.box {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  .contentView {
    background-color: white;
    border-radius: 5px;
    height: calc(100vh - 144px);
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
</style>
